import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import utils from 'utils';
import ListLoading from 'atComponents/ListLoading';
import * as actions from '../actions/index';
import { Step, Balloon } from '@teamix/ui';
import Step0 from './step0';
import Step1 from './step1';
import Step2 from './step2';
import Records from './records';
import UpgradeProgress from './progress';
import track from 'utils/track';
import { ENUM } from 'utils/constants.js';
import './index.scss';
import intl from '../../../locale';

const prefix = 'code-aliyun-upgrade';

const { Tooltip } = Balloon;

class Root extends Component {
  componentDidMount() {
    const step = utils.getUrlSearchParam('step');
    const switchOrg = utils.getUrlSearchParam('switch_org');
    this.props.updateData({
      curStep: step === undefined || step === null ? undefined : Number(step),
    });

    // 获取有权限的企业
    this.props.getOrganizations();
    const { user_role } = window.FORCE.organization;
    if (user_role && ENUM.access_level_id[user_role] >= 60) {
      // 获取上一次记录
      if (switchOrg === 'true') {
        this.props.getLastRecord(actions.defaultLastRecordPage, true);
      } else {
        this.props.getLastRecord();
      }
    }
  }

  handleCloseIframe = () => {
    track({
      action: 'close_upgrade',
    });

    if (window.parent) {
      window.parent.location.href = 'https://code.aliyun.com/';
    }
  };

  togglePage = () => {
    const { pageType } = this.props;
    if (pageType === 'steps') {
      track({
        action: 'view_upgrade_record',
      });
    }
    this.props.updateData({
      pageType: pageType === 'steps' ? 'records' : 'steps',
    });
  };

  renderStep = () => {
    const { curStep, pageType } = this.props;
    if (pageType === 'records') {
      return <Records {...this.props} />;
    }
    // curStep为4的时候，到结果页
    if (curStep === 3) {
      return <UpgradeProgress {...this.props} />;
    }
    let curStepDom = null;
    if (curStep === 0) {
      curStepDom = <Step0 {...this.props} />;
    }
    if (curStep === 1) {
      curStepDom = <Step1 {...this.props} />;
    }
    if (curStep === 2) {
      curStepDom = <Step2 {...this.props} />;
    }
    const title = [
      intl.get({
        id: 'code-assets.code-aliyun-upgrade.containers.root.SelectEnterprise',
        defaultMessage: '选择企业',
      }),
      intl.get({
        id: 'code-assets.code-aliyun-upgrade.containers.root.SelectAProject',
        defaultMessage: '选择项目',
      }),
      intl.get({
        id: 'code-assets.code-aliyun-upgrade.containers.root.StartUpgrade',
        defaultMessage: '开始升级',
      }),
    ];
    return (
      <div className={`${prefix}-steps`}>
        <div className={`${prefix}-steps-title`}>
          <Step current={curStep} shape="circle" labelPlacement="hoz">
            {title.map((item, index) => {
              return <Step.Item key={index} title={title[index]} />;
            })}
          </Step>
        </div>
        {curStepDom}
      </div>
    );
  };

  renderRightTop = () => {
    const { pageType, upgrading } = this.props;

    return (
      <div className={`${prefix}-right-top`}>
        <span className={`${prefix}-right-top-page-toggle`} onClick={this.togglePage}>
          {pageType === 'steps'
            ? intl.get({
                id: 'code-assets.code-aliyun-upgrade.containers.root.UpgradeRecords',
                defaultMessage: '升级记录',
              })
            : intl.get({
                id: 'code-assets.code-aliyun-upgrade.containers.root.Upgrade',
                defaultMessage: '前往升级',
              })}
        </span>
        <span className={`${prefix}-right-top-split`} />
        <span className={`${prefix}-right-top-close`} onClick={this.handleCloseIframe}>
          {upgrading ? (
            <Tooltip
              align="b"
              trigger={intl.get({
                id: 'code-assets.code-aliyun-upgrade.containers.root.DisableUpgrade',
                defaultMessage: '关闭升级',
              })}
            >
              {intl.get({
                id: 'code-assets.code-aliyun-upgrade.containers.root.TheOngoingUpgradeWillContinue',
                defaultMessage: '进行中的升级将在后台继续执行',
              })}
            </Tooltip>
          ) : (
            intl.get({
              id: 'code-assets.code-aliyun-upgrade.containers.root.DisableUpgrade',
              defaultMessage: '关闭升级',
            })
          )}
        </span>
      </div>
    );
  };

  render() {
    const { isLoading, curStep } = this.props;
    return (
      <div className={`${prefix}`}>
        {curStep !== undefined && !isLoading ? (
          <div className={`${prefix}-content`}>
            {this.renderStep()}
            {this.renderRightTop()}
          </div>
        ) : (
          <div style={{ marginTop: 100 }}>
            <ListLoading />
          </div>
        )}
      </div>
    );
  }
}

export default connect(
  (state) => state,
  (dispatch) => bindActionCreators(actions, dispatch),
)(Root);
